<template>
  <div class="chart-content-wrapper" @mouseenter="mouseenter()" @mouseleave="mouseleave">
    <top-filter :title="title" ref="topFilter">
      <single-list-filter-without-cb :filter="filterN" :type="'years'"
                                     @confirmSingleSelect="confirmSingleSelectYears">
      </single-list-filter-without-cb>
      <double-check-filter @confirmDoubleSelect="confirmSingleSelectPlanArea" defaultText="统筹区" :filter="filterN"
                           type="planArea" :isParentLinkChild="true"></double-check-filter>
      <group-list-filter :defaultText="'医院等级'" :filter="filterN" :type="'detailHospital'"
                         @confirmDoubleSelect="confirmDoubleSelectDetailHospital" :isParentLinkChild="true">
      </group-list-filter>
      <single-list-filter-without-cb :filter="filterN" :type="'freeSortType'"
                                     @confirmSingleSelect="confirmSingleSelectFreeSortType">
      </single-list-filter-without-cb>
    </top-filter>
    <h1 class="unit-text">单位：万元</h1>
    <div class="chart-container" v-show="isShowChart">
      <div id="medicalTypeChartsId" class="chart-type1"></div>
      <summarize :showSummarizeText="conclusion"></summarize>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {setChartHeight, loadingOpt} from '../../../assets/js/utils.js'
  import TopFilter from '../filter/top-filter1.vue'
  import Summarize from '../summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../filter/single-list-filter-without-checkbox.vue'
  import GroupListFilter from '../filter/group-list-filter.vue'
  import DoubleCheckFilter from '../filter/double-check-filter.vue'
  import {pieChartOption, formatFunc, tooltipFormatFunc} from '../../common/mixin'
  import {getMedicalTypeAnalyseData} from '../../../api/last-api'
  import {setHospLevelAndHospCode, getDefaultThreeHospChildId} from  './utils/dataUtils'
  import {
    getDefaultYear,
    getDefaultAreaCode,
    getDefaultHospLevel,
    getDefaultFreeSortTypeWithoutAll
  } from './utils/dataUtils'
  export default {
    components: {
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb,
      GroupListFilter,
      DoubleCheckFilter
    },
    props: ['isChange', 'filter'],
    watch: {
      isChange(){
        setTimeout(() => {
          this.myChart.resize();
        }, 101)
      }
    },
    activated(){
      this.getMedicalTypeAnalyseData()
    },
    data () {
      return {
        isShowChart: true,
        filterN: JSON.parse(JSON.stringify(this.filter)),
        itemStyle: {
          height: '300px'
        },
        title: '',
        conclusion: '',
        chartOptions: JSON.parse(JSON.stringify(pieChartOption)),
        year: getDefaultYear(this.filter),
        planAreaId: getDefaultAreaCode(this.filter).join(','),
        freeSortType: getDefaultFreeSortTypeWithoutAll(this.filter),
        hospitalId: getDefaultThreeHospChildId(this.filter).join(','),
        hospitalLevel: '',
        resultLevel: '3',
        resultId: ''
      }
    },
    created() {
      // 因为采用JSON.parse.stringify做深拷贝，方法无法拷贝，所以需要重新设置
      this.chartOptions.series[1].label.formatter = formatFunc

      this.chartOptions.series[0].tooltip.formatter = tooltipFormatFunc
      this.chartOptions.series[1].tooltip.formatter = tooltipFormatFunc
    },
    mounted(){
      setChartHeight();
      this.myChart = this.$echarts.init(document.getElementById('medicalTypeChartsId'), null, {renderer: 'svg'})
      this.getMedicalTypeAnalyseData()
//      this.setDataIntoCharts(require('./test/medicalType.json').data)
    },
    methods: {
      drawEveryMedicalTypeCharts(){
        this.myChart.setOption(this.chartOptions);
        let that = this;
        this.myChart.on('click', (item) => {
          let hash = window.location.hash;
          if (item.componentSubType === 'pie') {
            this.mouseleave()
            let params = JSON.stringify(this.detailVo[item.data.index])
            this.$router.push({
              path: `/report/chartDetail2/${params}/detail`,
              query:{
                hash,
              }
            })
          }
        });
      },
      getMedicalTypeAnalyseData(){
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.myChart.clear();
          this.myChart.showLoading(loadingOpt)
          // 获取医疗类别占医疗收入比重分析
          getMedicalTypeAnalyseData(this.hospitalLevel, this.year, this.planAreaId, this.hospitalId, this.freeSortType,
            this.resultLevel, this.resultId).then((rep) => {
            this.myChart.hideLoading();
            if (rep.code == 0) {
              this.isShowChart = true;
              this.setDataIntoCharts(rep.data)
            } else {
              this.isShowChart = false;
            }
          }).catch(err => {
            this.isShowChart = false;
          })
        }, 300)
      },
      setDataIntoCharts(response) {
        // 详情所需要的数据
        this.detailVo = response.detailVo
        // 设置顶部的标题
        this.title = response.reportName
        // 设置结论
        this.conclusion = response.conclusion
        // 清空饼状图数据,此处采用两个饼状图叠加的方式
        this.chartOptions.series[0].data = []
        this.chartOptions.series[1].data = []
        response.arrayVo.forEach((item, index) => {
          let itemData = {
            index: index,
            value: item.charge,
            name: item.medicalName,
            itemStyle: {
              color: '#FFD66A'
            }
          }
          if (item.medicalId == 1) {
            itemData.itemStyle.color = '#FFD66A'
          } else if (item.medicalId == 2) {
            itemData.itemStyle.color = '#8BC89E'
          } else if (item.medicalId == 3) {
            itemData.itemStyle.color = '#FF6A93'
          }
          this.chartOptions.series[0].data.push(itemData)
          this.chartOptions.series[1].data.push(itemData)
        })
        this.drawEveryMedicalTypeCharts()
      },
      confirmSingleSelectYears(filter) {
        this.year = filter
        this.getMedicalTypeAnalyseData();
      },
      confirmSingleSelectPlanArea(filter) {
        this.planAreaId = filter.join(',')
        this.getMedicalTypeAnalyseData();
      },
      confirmDoubleSelectDetailHospital(filter){
        let hospLevelCodeObj = setHospLevelAndHospCode(this.filterN, filter)
        this.hospitalLevel = hospLevelCodeObj.hospLevel
        this.hospitalId = hospLevelCodeObj.hospCode
        this.resultLevel = hospLevelCodeObj.resultLevel
        this.resultId = hospLevelCodeObj.resultId
        this.getMedicalTypeAnalyseData();
      },
      confirmSingleSelectFreeSortType(filter) {
        this.freeSortType = filter
        this.getMedicalTypeAnalyseData();
      },
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      }
    }
  };
</script>

<style>
  @import "../../../assets/css/last-charts.css";
</style>
